<template>
  <div class="container">
    <el-dialog title="添加" :visible.sync="dialogVisible" width="50%" :before-close="close">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【题型】</span>:
            <span> {{ previewArr.questionType == 1 ? "单选" : "多选" }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【编号】</span>: <span>{{ previewArr.id }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【难度】</span>:
            <span>{{ previewArr.difficulty == 1 ? "简单" : "困难" }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【标签】</span>: <span>{{ previewArr.tags }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="el_roe">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【学科】</span>: <span>{{ previewArr.subjectName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【目录】</span>: <span>{{ previewArr.directoryName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>【方向】</span>: <span>{{ previewArr.direction }}</span>
          </div>
        </el-col>
        <!-- <el-col :span="6"><div class="grid-content bg-purple"><span>【标签】</span>: <span>单选</span></div></el-col> -->
      </el-row>
      <hr />
      <div>
        <el-row :gutter="20" class="el_roe">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>【题干】</span>: <span></span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_roe">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span v-html="previewArr.question"></span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_roe">
          <el-col :span="20">
            <div
              v-if="previewArr.questionType == 1"
              class="grid-content bg-purple"
            >
              <span>单选题选项:</span>(以下选中的选项为正确答案) <span></span>
            </div>
            <div
              v-if="previewArr.questionType === '2'"
              class="grid-content bg-purple"
            >
              <span>多选题选项:</span>(以下选中的选项为正确答案) <span></span>
            </div>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="el_roe"
          v-for="(item, index) in previewArr.options"
          :key="index"
        >
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-radio
                v-if="previewArr.questionType == 1"
                v-model="item.isRight"
                :label="1"
                >{{ item.title }}</el-radio
              >
              <el-checkbox
                v-if="previewArr.questionType === '2'"
                :value="item.isRight ? true : false"
                >{{ item.title }}</el-checkbox
              >
            </div>
          </el-col>
        </el-row>
        <hr />
        <el-row :gutter="20" class="el_roe">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>【参考答案】</span>:<el-button size="mini" type="danger"
                >视频答案解析</el-button
              >
            </div>
          </el-col>
        </el-row>
        <hr />
        <el-row :gutter="20" class="el_roe">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <span>【参考答案】:</span><span v-html="previewArr.answer"></span>
            </div>
          </el-col>
        </el-row>
        <hr />
        <el-row :gutter="20" class="el_roe">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <span>【参考答案】</span>:{{ previewArr.remarks }}
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_roe row_btn">
          <el-col :span="24">
            <el-button
              type="primary"
              @click="$emit('update:dialogVisible', false)"
              >关 闭</el-button
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    previewArr: {
      type: Object,
      default: () => {}
    },
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      radions: 1
    }
  },
  methods: {
    close () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped>
.el_roe {
  margin-top: 20px;
}
.row_btn {
  text-align: right;
}
</style>
